<template>
	<zw-dialog :hidden="hidden" title="Edit basic data" :width="440" :height="330" :showHeaderBg="false" :hideFooter="false"
	 :showFooterBg="false" borderRadius confirmText="SAVE" @close="closeDialog" @cancel="closeDialog" @confirm="submit">
		<view class="form-wrap">
			<view class="form-item">
				<view class="name">Nickname：</view>
				<view class="value">
					<input v-model="user.name" placeholder="Nickname" maxlength="20" />
				</view>
			</view>
			<view class="form-item">
				<view class="name">Gender：</view>
				<radio-group class="value" @change="genderChange">
					<label>
						<radio :checked="user.gender == 1" value="1" color="#FF6700"></radio>
						<text>male</text>
					</label>
					<label>
						<radio :checked="user.gender == 2" value="2" color="#FF6700"></radio>
						<text>female</text>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<view class="name">birthday：</view>
				<view class="value pointer" @click="hiddenDatePicker = false;">
					<input v-model="user.birthday" placeholder="choose birthday" disabled />
				</view>
			</view>
			<view class="form-item">
				<view class="name">region：</view>
				<view class="value pointer" @click="hiddenCityPicker = false;">
					<input v-model="user.region" placeholder="choose region" maxlength="30" disabled />
				</view>
			</view>
			<view class="form-item textarea">
				<view class="name">Personal signature：</view>
				<view class="value">
					<textarea v-model="user.motto" placeholder="Personal signature" maxlength="30"></textarea>
				</view>
			</view>
		</view>

		<!-- 生日选择 -->
		<date-picker :hidden.sync="hiddenDatePicker" :value="user.birthday" @change="birthdayChange"></date-picker>

		<!-- 地区选择器 -->
		<view class="city-picker-warpper" v-if="!hiddenCityPicker">
			<city-picker :hidden.sync="hiddenCityPicker" :deep="2" @change="regionChange"></city-picker>
		</view>
	</zw-dialog>
</template>

<script>
	import datePicker from '@/components/user/picker/date-picker.vue';
	import cityPicker from '@/components/user/picker/city-picker.vue';

	export default {
		components: {
			datePicker,
			cityPicker
		},
		props: {
			hidden: {
				type: Boolean,
				default: true
			},
			loginUser: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {
				user: {},
				hiddenDatePicker: true,
				hiddenCityPicker: true
			}
		},
		created() {
			this.initUser();
		},
		watch: {
			hidden(e) {
				if (e) {
					this.initUser();
					this.hiddenDatePicker = this.hiddenCityPicker = true;
				}
			}
		},
		methods: {
			initUser() {
				const user = {
					...this.loginUser
				};
				for (let key in user) {
					if (!user[key]) user[key] = '';
				}
				this.user = user;
			},
			closeDialog() {
				this.$emit('update:hidden', true);
			},
			genderChange(e) {
				this.user.gender = Number(e.detail.value);
			},
			birthdayChange(e) {
				this.user.birthday = e;
				this.hiddenDatePicker = true;
			},
			regionChange(e) {
				let region = e.province;
				if (e.city.indexOf(e.province) == -1) region += ' ' + e.city;
				this.user.region = region;
				this.hiddenCityPicker = true;
			},
			submit() {
				if (!this.$regular.nickName.test(this.user.name)) {
					return this.$util.showErrorMsg('Please enter the correct nickname!');
				}
				if (this.user.gender < 1) {
					return this.$util.showErrorMsg('Please select gender!');
				}
				this.$emit('change', this.user);
			}
		}
	}
</script>

<style lang="scss">
	.form-wrap {
		width: 100%;
		padding: 20px;

		.form-item {
			position: relative;
			padding-bottom: 15px;
			height: 40px;
			@extend %flex-align-center;

			.name {
				width: 60px;
				margin-right: 10px;
				text-align: right;
				font-weight: bold;
				color: #666;
			}

			.value {
				width: 320px;
				color: $text-color;

				&.pointer {

					&,
					/deep/ .uni-input-input {
						cursor: pointer;
					}
				}

				input {
					height: 40px;
					line-height: 40px;
					padding: 0 10px;
					border: 1px solid $border-color;
				}

				label {
					margin-right: 20px;

					radio {
						transform: scale(.8);
					}
				}
			}

			&.textarea {
				align-items: flex-start;
				height: 100px;

				textarea {
					width: 298px;
					padding: 10px;
					height: 60px;
					border: 1px solid $border-color;
				}
			}
		}
	}
	
	.city-picker-warpper {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 285px;
	}
</style>
